<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<meta name="viewport" content="width=960">
<!--///////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //		Styles
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->
<script type="text/javascript" src="scripts/coin/jquery-1.4.2.js"></script>
<script type="text/javascript" src="scripts/coin/coin-slider.js"></script>
<link rel="stylesheet" href="css/coin/coin-slider-styles.css" type="text/css" />
</head>

<body>
<h1 id="header"> <a href="http://tutorialzine.com/2010/12/google-christmas-doodle/">这是一个logo</a> </h1>
<nav>
	<ul>
		<li><a href="#" >作品案例</a>
			<ul>
				<li><a href="#" onClick="onIndoorClick()">室内案例</a></li>
				<li><a href="#" onClick="onLandscapeClick()">景观案例</a></li>
				<li><a href="#" onClick="onPlanClick()">策划案例</a></li>
			</ul>
		</li>
		<li><a href="#" onClick="onDesignProcessClick()">设计流程</a></li>
		<li><a href="#" onClick="onDesignTeamClick()">设计团队</a></li>
		<li><a href="#" onClick="onAboutMeClick()">关于我们</a></li>
		<li><a href="#" onClick="onRecruitmentClick()">人才招聘</a></li>
		<li><a href="#" onClick="onNewsClick()">新闻中心</a></li>
		<li><a href="#" onClick="onContactUsClick()">联系我们</a></li>
	</ul>
</nav>
<div id="content">
	<div id="mainContent">
		<div id="imageContent" style="overflow:hidden; width:500px;">
			<div id='coin-slider'> 
			<a href="img01_url" target="_blank"> <img src='images/1.jpg' > <span> Description for img01 </span> </a> 
			 <a href="imgN_url"> <img src='images/2.jpg' > <span> Description for imgN </span> </a>
			  <a href="imgN_url"> <img src='images/3.jpg' > <span> Description for imgN </span> </a>  
			 </div>
		</div>
	</div>
	<aside id="sidebar">
		<section>
			<header>
				<h3>Categories</h3>
			</header>
			<ul>
				<li><a href="#">Lorem ipsum dolor</a></li>
				<li><a href="#">Sit amet consectetur</a></li>
				<li><a href="#">Adipisicing elit sed</a></li>
				<li><a href="#">Do eiusmod tempor</a></li>
				<li><a href="#">Incididunt ut labore</a></li>
			</ul>
		</section>
		<section>
			<header>
				<h3>Archives</h3>
			</header>
			<ul>
				<li><a href="#">December 2008</a></li>
				<li><a href="#">January 2009</a></li>
				<li><a href="#">February 2009</a></li>
				<li><a href="#">March 2009</a></li>
				<li><a href="#">April 2009</a></li>
				<li><a href="#">May 2009</a></li>
				<li><a href="#">June 2009</a></li>
			</ul>
		</section>
	</aside>
</div>
<script type='text/javascript' src='scripts/myscript.js'></script> 
<script type="text/javascript">
	$(document).ready(function() {
		$('#coin-slider').coinslider({ width: 800, delay: 5000,effect: 'straight'});
//width: 565, // width of slider panel
//height: 290, // height of slider panel
//spw: 7, // squares per width
//sph: 5, // squares per height
//delay: 3000, // delay between images in ms
//sDelay: 30, // delay beetwen squares in ms
//opacity: 0.7, // opacity of title and navigation
//titleSpeed: 500, // speed of title appereance in ms
//effect: '', // random, swirl, rain, straight
//navigation: true, // prev next and buttons
//links : true, // show images as links
//hoverPause: true // pause on hover
	});
</script>
<!--
 <footer>
	        <h2>Making a Beautiful HTML5 Portfolio</h2>
 </footer>
 -->
</body>
</html>
